<template lang="pug">
.login-container
    el-form.login-container__form(ref='loginFrom' label-position='right' label-width='80px' lg='6' :model='user' :rules='rules')
        h3.login-container__header 系统登录
        el-form-item(prop='email' label='电子邮件')
            el-input(type='text' placeholder='电子邮件' v-model='user.email')
        el-form-item(prop='password' label='密码')
            el-input(type='password' placeholder='密码' v-model='user.password')
        el-form-item
            el-button(type='primary' style='width:20%;float:left' @click.native.prevent="loginSubmitBtn('loginFrom')") 登录
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import RemoteValidatorAndTableEditMixin from "../components/RemoteValidatorAndTableEditMixin";
import { loginPost } from "../services";
import { UserModule } from "../store/modules/user";

export interface User {
  email?: string;
  password?: string;
  remember?: boolean;
  name?: string;
  token?: string;
}

@Component({
  mixins: [RemoteValidatorAndTableEditMixin]
})
export default class Login extends Vue {
  public user: User = {
    email: "jing.min@163.com",
    password: "123456",
    remember: true
  } as User;

  public created() {
    this.dataItem = "user";
  }

  public loginSubmitBtn(formName: string) {
    let self: Login = this;
    this.remoteValidate(self, formName, loginPost).then(
      function(data: any) {
        if (data) {
          UserModule.SAVE_TOKEN(data.token);
          UserModule.SAVE_USER(data.user);
          self.$router.push("/");
        }
      },
      function(data: any) {}
    );
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$box-header-bg: #bf5329;
$box-header-text: #fff;
$prefix-name: login;
$form-backgroud-color: #eee;
$form-header-backgroud-color: $box-header-bg;
$form-header-text-color: $box-header-text;

.#{$prefix-name}-container {
  height: 100%;
  position: relative;
  width: 100%;

  &__form {
    background-color: $form-backgroud-color;
    left: 50%;
    padding: 0.5rem;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -80%);
    width: 400px;
  }

  &__header {
    background-color: $form-header-backgroud-color;
    color: $form-header-text-color;
    font-weight: normal;
    letter-spacing: 0.25rem;
    line-height: 2.5rem;
    margin: -0.5rem -0.5rem 0.5rem;
    padding: 0;
    text-align: center;
  }
}
</style>
